<template>
  <div class="id1">
    <div class="Led">
      <div class="LedFont">{{list1.name}}</div>
        </div>
    <div class="element" v-for="(value,key,i) in list1.data" >
        <div class="tag">{{key}}:</div>
        <div class="value">{{value}}</div>
    </div>
    <div class="status" :style="{backgroundImage: 'url('+backgroudImg+')'+','+'url('+backgroudImg2+')'}">
        <div class="tag">当前设备状态</div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'DeviceStatus',
    props: ["dataList"],
    data () {
      return {
        Dstatus:[require('@/assets/img/圆4.png'),require('@/assets/img/圆2.png'),require('@/assets/img/圆3.png')],
        backgroudImg :'',
        backgroudImg2 :require('@/assets/img/02.png'),
        list1:{
          name:"LED电流",
          data:{"LED电流":"12mA","半导体制冷器温度":"67℃","调制器驱动电压":"45V","输入电压峰值":"12V","输入电压平均偏离差":"78",
          "二次谐波电压":"89mA","一次电流":"122A"},
          state:"正常"
        },
        
      }
    },
    created(){
      // this.list1.dstatu =1
      // console.log(this.dataList)
      this.list1 = this.dataList
      if(this.list1.state==="正常"){
        this.backgroudImg=this.Dstatus[0]
      }
      if (this.list1.state==="告警") {
        this.backgroudImg=this.Dstatus[2]
      }
      if (this.list1.state==="故障") {
        this.backgroudImg=this.Dstatus[1]
      }
      
    }
  }
</script>

<style scoped>
.id1{
    background:url("~@/assets/img/背景1.png") no-repeat center center;
    /* background-position: center; */
    background-size: contain;
    width: 210px;
	  height: 760px;
    /* margin: auto; */
    /* margin-left: 50%; */
}
.Led{
    /* position:absolute; */
    background:url("~@/assets/img/LED电流.png") no-repeat;
    background-position: center;
    margin: auto;
    width: 170px;
	  height: 170px;
    background-size:92% 92%;
    /* margin-top: 20%; */
    /* padding: 0; */ 
    

}
.element{
    background:url("~@/assets/img/01.png") no-repeat center;
    background-position: top;
    width: 170px; 
    height: 60px;
    /* margin: 0,0,0,0; */
    margin:0 auto;
    background-size: cover;
}
.status{
    /* background-image:url("../../assets/02.png") center center; */
    background-repeat: no-repeat;
    background-position: center 40%,top center;
    background-size: 58% 58%,contain;
    width: 170px; 
    height: 170px;
    margin:0 auto;
    /* margin-left: 10%; */
}
.tag{
  height: 25px;
  line-height: 32px;
  /* margin-top:10px; */
  text-align:left;
  text-indent:18px;
  font-style:normal;
  font-size: 4pt;
  color: rgb(6, 203, 255);
}
.value{
  text-align:center;
  font-style:normal;
  color: rgb(6, 203, 255);
  font-size: 18pt;
  margin-top: 0;
}
.LedFont{
  line-height: 170px;
  text-align:center;
  color: rgb(0, 240, 255);
  font-size: 10pt;
}
</style>
